<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>商品列表</title>
    <script src="__INDEX__/js/mui.min.js"></script>
    <link href="__INDEX__/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
    <link rel="stylesheet" href="__INDEX__/css/style.css" />
    <link rel="stylesheet" href="__INDEX__/css/yund.css" />
    <script type="text/javascript" src="__INDEX__/dist/jquery.min.js" ></script>
	<script type="text/javascript" src="__INDEX__/js/menudown.js" ></script>
</head>
<style>
	.my_li{
		border-bottom: 1px solid #d6cfcf;
	}
	.mystyl{
	    height: 3rem;
	    width: 100%;
	    line-height: 3rem;
	    text-align: center;
	    border-bottom: 1px solid #E6E6E6;
	    position: relative;
	    border-left: 2px solid -webkit-linear-gradient(red, blue);
	    background: white;
	}
</style>
<body>
	
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="JavaScript:history.go(-1)"></a>
	    <h1 class="mui-title">商品列表</h1>
	</header>
	<div class="mui-content shop_content">
		<div class="list_fenlnav clearfix">
			<div class="mask"></div>
			<dl class="topmenu">
				<dt>
					<div class="selectlist">
						<div class="select_textdiv">
							<p class="s_text">
								<span class="s_xznr">{if $goodstype}{$goodstype_name}{else}全部分类{/if}</span>
								<span class="iconfont icon-jiantou"></span>
							</p>
						</div>
						<div class="select_textul">
							<ul class="select_first_ul">
								<li onclick="sel_goodslist(this)" data-type=0 class="my_li">
									<p>全部</p>
								</li>
								{volist name='goodstype_list' id='vo' }
									<li onclick="sel_goodslist(this)" value="{$vo.id}" class="my_li">
										<p><a href="javascript:void(0)">{$vo.name}</a></p>
									</li>
								{/volist}
							</ul>
						</div>
					</div>	
				</dt>
				<dt>
					<div class="selectlist">
						<div class="mystyl">
							<a href="javascript:void(0)" onclick="sel_time_sort()">
								<p class="s_text">
									<span class="s_xznr" style="color: #000;;">最新时间</span>
									<span class="iconfont icon-jiantou"></span>
								</p>
							</a>
						</div>
					</div>	
				</dt>
				<dt>
					<div class="selectlist">
						<div class="mystyl">
							<a href="javascript:void(0)" onclick="sel_price_sort()">
								<p class="s_text">
									<span class="s_xznr" style="color: #000;;">价格</span>
									<span class="iconfont icon-jiantou"></span>
								</p>
							</a>
						</div>
					</div>	
				</dt>
			</dl>				
		</div>
	    <ul class="sccp_list" id='item_ul'>
	    	{volist name="goods_list" id="vo" empty="没有数据"}
    		<li>
    			<a href="{:url('shop/show',['goods_id'=>$vo.goods_id])}">
    				<div class="sccp_img"><img src="{$vo.logo}"></div>
    				<div class="sccp_infobox">
    					<p class="cpname">{$vo.goods_name}</p>
    					<div class="pribox">
    						<div class="left">
    							<span class="pri">¥<em>{$vo.cost_price}</em></span>
    							<span class="yj">¥{$vo.sale_price}</span>
    						</div>
    						<div class="right"><span class="iconfont icon-gouwuche"></span></div>
    					</div>
    				</div>
    			</a>
    		</li>
    		{/volist}
    	</ul>
    	<form method="post" action="{:url('shop/lists')}" id='my_form'>
	    	<input type="hidden" name='page' id='page' value="1">
	    	<input type="hidden" name='goodstype' id='goodstype' value='{$goodstype}'>
	    	<input type="hidden" name="time_sort" id='time_sort' value="{$time_sort}">
	    	<input type="hidden" name='price_sort' id='price_sort' value="{$price_sort}">
    	</form>
	</div>
	{include file="public/bottom" /}
</body>
</html>
{include file="public/footer" /}
<script>
	mui('body').on('tap','a',function(){
	    window.top.location.href=this.href;
	});
//底部加载事件
	$(window).scroll(function() {
		if($(document).scrollTop()+1 >= $(document).height() - $(window).height()) {
			var page = $('#page').val();
			$('#page').val(parseInt(page)+1);
			$.ajax({
			   	type:"post",
			   	data:{
			   		price_sort	: $('#price_sort').val(),
			   		time_sort	: $('#time_sort').val(),
			   		goodstype	: $('#goodstype').val(),
			   		page		: $('#page').val()
			   	},
			   	url:"{:url('index/shop/js_lists')}",
			   	success:function(data){
			   		var goods_list = data.data;
			   		for(var i=0;i<goods_list.length;i++){
			   			
			   			var html =	"<li>"+
					    			"<a href='/shop/show?goods_id="+goods_list[i]['goods_id']+"'>"+
					    				"<div class='sccp_img'><img src='"+goods_list[i]['logo']+"'></div>"+
					    				"<div class='sccp_infobox'>"+
					    					"<p class='cpname'>"+goods_list[i]['goods_name']+"</p>"+
					    					"<div class='pribox'>"+
					    						"<div class='left'>"+
					    							"<span class='pri'>¥<em>"+goods_list[i]['cost_price']+"</em></span>"+
					    							"<span class='yj'>¥"+goods_list[i]['sale_price']+"</span>"+
					    						"</div>"+
					    						"<div class='right'><span class='iconfont icon-gouwuche'></span></div>"+
					    					"</div>"+
					    				"</div></a></li>";
			   			$('#item_ul').append(html);
			   		} 
			   	}
			})
		}
	});
</script>
<script>
	function sel_goodslist(obj){
		var type_id = obj.value;
		$('#goodstype').val(type_id);
		
		$("#my_form").submit()
	// var a = $(".focus")[0].value;
	}
	
	function sel_time_sort(){
		var time_sort =  $("#time_sort").val();
		if(time_sort == 1){
			time_sort = 2;
		}else{
			time_sort = 1;
		}
		$("#time_sort").val(time_sort);
		$("#my_form").submit()
	}
	
	function sel_price_sort(){
		var price_sort =  $("#price_sort").val();
		if(price_sort == 1){
			price_sort = 2;
		}else{
			price_sort = 1;
		}
		$("#price_sort").val(price_sort);
		$("#my_form").submit()
		
	}
	
</script>